<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { useGetReturnFactoryList } from '@/services/pages/return-factory/useReturnFactory'
  import { ElTable, ElTableColumn } from 'element-plus'

  const { total, list, getListParam, getListLoading, getList } = useGetReturnFactoryList()

  defineOptions({
    name: 'TableReturnFactoryList',
  })

  // 全局路由对象
  const router = useRouter()

  /**
   * 跳转到返厂详情
   */
  const toReturnFactoryDetail = (id: string) => {
    router.push({ path: `/return/factory/detail/${id}` })
  }

  /**
   * 获取返厂列表
   * @param {ReturnFactoryAPIRequest.GetList} param - 请求参数
   */
  const _getList = async (param?: ReturnFactoryAPIRequest.GetList) => {
    getListParam.value = param
    await getList()
  }

  defineExpose({
    getList: _getList,
    total,
  })
</script>

<template>
  <el-table
    v-loading="getListLoading"
    :border="true"
    :data="list"
    height="100%"
    :tooltip-options="{
      popperClass: 'return-factory-reason',
    }"
  >
    <!-- 序号 -->
    <el-table-column type="index" fixed="left" :align="'center'" width="50" label="序号" />

    <!-- 返厂单号 -->
    <el-table-column label="返厂单号" prop="repairNo" width="140" show-overflow-tooltip>
      <template #default="{ row }">
        <h-link @click="toReturnFactoryDetail(row.id)">{{ row.repairNo }}</h-link>
      </template>
    </el-table-column>

    <!-- 返厂类型 -->
    <el-table-column label="返厂类型" prop="repairModule" width="100" show-overflow-tooltip />

    <!-- 客户名称 -->
    <el-table-column label="客户名称" prop="username" width="80" show-overflow-tooltip />

    <!-- 公司电话 -->
    <el-table-column label="公司电话" prop="phone" width="110" show-overflow-tooltip />

    <!-- 报单公司 -->
    <el-table-column label="报单公司" prop="repairCompanyName" width="110" show-overflow-tooltip />

    <!-- 报单公司电话 -->
    <el-table-column
      label="报单公司电话"
      prop="repairCompanyPhone"
      width="110"
      show-overflow-tooltip
    />

    <!-- 设备信息 -->
    <el-table-column label="设备信息" show-overflow-tooltip width="320">
      <template #default="{ row }">
        {{ row.goods.join('、') }}
      </template>
    </el-table-column>

    <!-- 序列号 -->
    <el-table-column label="序列号" show-overflow-tooltip width="160">
      <template #default="{ row }">
        {{ row.snCodes.join('、') }}
      </template>
    </el-table-column>

    <!-- 数量 -->
    <el-table-column label="数量" prop="qty" width="100" />

    <!-- 返厂原因 -->
    <!-- <el-table-column label="返厂原因" prop="repairDescr" width="320" show-overflow-tooltip /> -->

    <!-- 故障类型 -->
    <!-- <el-table-column label="故障类型" prop="faultDescr" width="100" show-overflow-tooltip /> -->

    <!-- 返厂来源 -->
    <el-table-column label="返厂来源" prop="source" width="120">
      <template #default="{ row }">
        <span v-if="row.source === 1">系统创建</span>
        <span v-if="row.source === 2">工单生成</span>
        <span v-if="row.source === 3">公司移动端生成</span>
        <span v-if="row.source === 4">部门移动端生成</span>
      </template>
    </el-table-column>

    <!-- 创建时间 -->
    <el-table-column label="创建时间" prop="createTime" width="160" />

    <!-- 更新时间 -->
    <el-table-column label="更新时间" prop="updateTime" width="160" />

    <!-- 状态 -->
    <el-table-column label="状态" prop="status" fixed="right" :align="'center'" width="80">
      <template #default="{ row }">
        <div class="flex_justify_center">
          <h-status v-if="row.status === 1" type="warning">待审核</h-status>
          <h-status v-else-if="row.status === 2" type="warning">待退回</h-status>
          <h-status v-else-if="row.status === 3" type="warning">待确认</h-status>
          <h-status v-else-if="row.status === 4">处理中</h-status>
          <h-status v-else-if="row.status === 5" type="warning">待寄回</h-status>
          <h-status v-else-if="row.status === 6" type="warning">待签收</h-status>
          <h-status v-else-if="row.status === 7" type="success">已完成</h-status>
          <h-status v-else-if="row.status === 8" type="info">已取消</h-status>
        </div>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column label="操作" prop="operate" fixed="right" width="70">
      <template #default="{ row }">
        <h-link @click="toReturnFactoryDetail(row.id)">详情</h-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
  :deep(.return-factory-reason) {
    max-width: 300px !important;
    max-height: 150px !important;
    overflow: auto !important;
  }
</style>
